<template>
  <div>
    <div class="card-line">
      <Row>
        <Col span="6">
          <div class="orderPie">
            <apexchart
              type="pie"
              width="380"
              :options="orderOptions"
              :series="orderSeries"
            ></apexchart>
          </div>
        </Col>
        <Col span="18">
          <!-- id="orderdescription" -->
          <div class="orderdesc">
            <apexchart
              type="line"
              height="210"
              :options="brokenLineOptions"
              :series="brokenLineSeries"
            ></apexchart>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { CountUp } from "countup.js";
var zh = require("../../../libs/zh.json");
import { operateEntrusted } from "@/api/index";
export default {
  name: "cardLine",
  components: {},
  props: {
    timeSearch: {
      type: Object,
    },
  },
  data() {
    return {
      orderOptions: {},
      orderSeries: [],
      orderList: [],
      carry_money: [],
      brokenLineOptions: {},
      brokenLineSeries: [],
      daysArr: [],
      carryArr: [],
      entrustMoney: [],
    };
  },
  methods: {
    init() {
      if (typeof this.timeSearch.startDate == "undefined") {
        return false;
      }
      this.orderList = [];
      this.dataArr = [];
      this.carryArr = [];
      operateEntrusted(this.timeSearch).then((res) => {
        let obj = res.result;
        obj.entrustedBrokenLine.forEach((item) => {
          if (typeof item.days == "undefined") {
            item.days = "";
          }
          if (typeof item.carry_money == "undefined") {
            item.carry_money = "0";
          }
          if (typeof item.entrust_money == "undefined") {
            item.entrust_money = "0";
          }
          this.daysArr.push(item.days);
          this.carryArr.push(item.carry_money);
          this.entrustMoney.push(item.entrust_money);
        });
        // 折线数据
        this.brokenLineSeries = [
          {
            name: "承运合同金额",
            color: "#3CB371",
            data: this.carryArr,
          },
          {
            name: "委托合同金额",
            color: "#FF8C00",
            data: this.entrustMoney,
          },
        ];
        // 圆图数据
        this.orderList.push(
          obj.entrustedPieChart.implement_num,
          obj.entrustedPieChart.close_num,
          obj.entrustedPieChart.end_num //完结是4
        );
        this.$emit("childOrder", obj);
        // 折线样式
        this.brokenLineOptions = {
          chart: {
            height: 240, //高度
            type: "line",
            zoom: {
              enabled: false,
            },
            stacked: false,
            toolbar: {
              show: false,
            },
            locales: [zh],
            defaultLocale: "zh",
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            curve: "straight",
            show: true,
            width: [3, 3],
            colors: ["#3CB371", "#FF8C00"],
          },
          title: {
            text: "", //标题
            align: "left",
          },
          grid: {
            row: {
              colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
              opacity: 0.5,
            },
          },
          xaxis: {
            labels: {
              show: true,
              rotate: -45, //倾斜角度
              rotateAlways: true, //是否旋转倾斜
              hideOverlappingLabels: true, //是否隐藏重叠
              showDuplicates: false,
              formatter: function (value) {
                return value;
              },
            },
            categories: this.daysArr,
          },
          yaxis: {
            labels: {
              show: true,
              rotate: 0, //倾斜角度
              rotateAlways: true, //是否旋转倾斜
              hideOverlappingLabels: true, //是否隐藏重叠
              showDuplicates: false,
              formatter: function (value) {
                return value;
              },
            },
          },
          fill: {
            opacity: 1,
          },
          tooltip: {
            y: {
              formatter: function (val) {
                return +val + " 元"; //名称
              },
            },
          },
        };
      });

      // 圆图数据
      this.orderSeries = this.orderList;
      this.orderOptions = {
        chart: {
          width: "70%",
          type: "pie",
        },
        labels: ["派单中", "已关闭", "已完结"],
        theme: {
          monochrome: {
            enabled: true,
          },
        },
        fill: {
          colors: ["#3CB371", "#FF69B4", "#1E90FF"],
        },
        plotOptions: {
          pie: {
            dataLabels: {
              offset: -5,
            },
          },
        },
        title: {
          text: "", //图表名称
        },
        dataLabels: {
          formatter(val, opts) {
            const name = opts.w.globals.labels[opts.seriesIndex];
            return [name, val.toFixed(1) + "%"];
          },
        },
        legend: {
          show: false,
        },
      };
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
.orderPie {
  margin-left: 50px;
  margin-top: 30px;
}
.orderdesc {
  border: 1px solid #eee;
}
.card-line {
  height: 210px;
  .card-header {
    display: flex;
    height: 22px;
    align-items: center;
    justify-content: space-between;
    color: rgba(0, 0, 0, 0.45);
  }
  .value {
    height: 38px;
    margin-top: 4px;
    margin-bottom: 6px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.85);
    font-size: 30px;
    line-height: 38px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .today {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #e8e8e8;
    .v {
      margin-left: 8px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>